<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Record</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!-- <link rel="stylesheet" type="text/css" href="css/main.css" /> -->
</head>

<body>
<style>
.detail {
    width: 980px;
    margin: 0 auto;
}
.detail .pie {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 30px 0 0;
    border-radius: 50%;
    text-align: center;
    background: #eee;
}
.detail .pie strong {
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    color: #666;
}
.detail .info {
    float: left;
}
.detail .meta {
    padding: 10px 5px;
    margin: 0;
    border-bottom: solid 1px #ddd;
}
.detail .list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detail .list li {
    padding: 10px 5px;
    margin: 0;
    border-bottom: solid 1px #ddd;
}
.detail .list span {
    display: inline-block;
    min-width: 80px;
}
</style>
<div class="detail" id="detail">
    <div class="pie">
        <strong>2000</strong>
    </div>
    <div class="info">
        <div class="meta">
            <span class="date">Oct. 10</span>
            <span class="mood">happy</span>
        </div>
        <ul class="list">
            <li>
                <span class="type">跑步</span>
                <span class="time">30 <small>min</small></span>
                <span class="kcal">1500 <small>kcal</small></span>
            </li>
            <li>
                <span class="type">游泳</span>
                <span class="time">15 <small>min</small></span>
                <span class="kcal">500 <small>kcal</small></span>
            </li>
        </ul>
    </div>
</div>
</body>
</html>